import React from "react";
import { Link, NavLink } from "react-router-dom";
import { Menu, Dropdown, Icon } from "antd";
import "./style.scss";

class Header extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            analysisMenu: [
                { name: "综合信息", href: "/main/analysis/general" },
                { name: "区域分析", href: "/main/analysis/regional" },
                { name: "预警分析", href: "/main/analysis/warning" },
                { name: "排行榜TOP30", href: "/main/analysis/ranking" }
            ],
            warningMenu: [
                { name: "APP", href: "/main/monitor/app" },
                { name: "人员", href: "/main/monitor/people" },
                { name: "专题", href: "/main/monitor/subject" }
            ]
        };
    }

    render() {
        const { analysisMenu, warningMenu } = this.state;
        // 研判分析
        const anaMenu = (
            <Menu className="menu-drop-down">
                {analysisMenu.map((item, index) => (
                    <Menu.Item key={index}>
                        <div>
                            <NavLink to={item.href}>{item.name}</NavLink>
                        </div>
                    </Menu.Item>
                ))}
            </Menu>
        );

        // 监控预警
        const warnMenu = (
            <Menu className="menu-drop-down">
                {warningMenu.map((item, index) => (
                    <Menu.Item key={index}>
                        <div>
                            <NavLink to={item.href}>{item.name}</NavLink>
                        </div>
                    </Menu.Item>
                ))}
            </Menu>
        );

        return (
            <div className="header">
                <div className="header-logo">
                    <i className="header-logo-icon" />
                    <span className="header-logo-title">涉众型金融APP监测平台</span>
                </div>
                <ul className="header-list">
                    <li className="header-list-item">
                        <NavLink to="/main/home">首页</NavLink>
                    </li>
                    <li className="header-list-item">
                        <NavLink to="/main/excavateQuery">挖掘查询</NavLink>
                    </li>
                    <li className="header-list-item">
                        <Dropdown overlay={anaMenu} trigger={["click"]}>
                            <NavLink to="/main/analysis">
                                研判分析 <Icon type="down" />
                            </NavLink>
                        </Dropdown>
                    </li>
                    <li className="header-list-item">
                        <Dropdown overlay={warnMenu} trigger={["click"]}>
                            <NavLink to="/main/monitor">
                                监控预警 <Icon type="down" />
                            </NavLink>
                        </Dropdown>
                    </li>
                </ul>
                <div className="header-right">
                    <div className="header-user">
                        <NavLink to="/main/user/personInformation">
                            <i className="iconfont" style={{ fontWeight: "bold" }}>
                                &#xe648;
                            </i>
                            <span>Admin</span>
                        </NavLink>
                    </div>
                    <div className="header-out">
                        <i className="iconfont">&#xe605;</i>
                        <Link to="/main/login">退出</Link>
                    </div>
                </div>
            </div>
        );
    }
}

export default Header;
